<template>
    <div>
                <el-row :gutter="20">
                    <el-col :span="4" style="margin-left: 300px">
                        <div class="grid-content bg-purple">
                            <div class="demo-input-suffix" style="margin-bottom: 20px;margin-top: 20px">
                                <div style="font-weight: bold; font-size: large">会员收益：
                                    <span style="font-weight: bold; font-size: large;color: red">{{vipMoney}}</span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="4" >
                        <div class="grid-content bg-purple">
                            <div class="demo-input-suffix" style="margin-bottom: 20px;margin-top: 20px">
                                <div style="font-weight: bold; font-size: large">今日收益：
                                    <span style="font-weight: bold; font-size: large;color: red">{{todayTotal}}</span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <div class="demo-input-suffix" style="margin-bottom: 20px;margin-top: 20px">
                                <div style="font-weight: bold; font-size: large">总收益：
                                    <span style="font-weight: bold; font-size: large;color: red">{{total}}</span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>

        <el-table
                :data="tableData"
                border
                show-summary
                style="width: 100%; margin-top: 20px">
            <el-table-column
                    prop="orderno"
                    label="订单编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="money"
                    label="暂存金额">
            </el-table-column>
            <el-table-column
                    prop="transactionTime"
                    label="暂存时间">
            </el-table-column>
            <el-table-column
                    prop="finishMoney"
                    label="实际到账">
            </el-table-column>
            <el-table-column
                    prop="finishTime"
                    label="实际到账时间">
            </el-table-column>
        </el-table>
        <el-pagination
                :page-size="7"
                :pager-count="5"
                @current-change="getAccountByPage"
                layout="prev, pager, next"
                :total="totalPage">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "moneyRecord",
        data() {
            return {
                tableData: [],
                totalPage:null,
                total:0,
                todayTotal:0,
                vipMoney:0,
                // fileList:[],
                // componentKey: null,
                // menuKey: 1, // 用来强制刷新
                // imageUrl:null,
                // uploadImgData: { busiName: 32 },
            };
        },

        created() {
            this.getAccountByPage(1);
            var that=this;
            this.$ajax.post('/jz/maccount/getTotalMoney').then(function (resp) {
                console.log(resp.data);
                if(resp.data.status==200){
                    that.total=resp.data.total;
                    that.todayTotal=resp.data.todayTotal
                }
            })

            this.$ajax.post('/jz/manager/getVipMoney').then(function (resp) {
                console.log(resp.data);
                    that.vipMoney=resp.data.vipMoney;
            })
        },


        methods:{

            getAccountByPage(currentPage){
                var that=this;
                this.$ajax.post('/jz/maccount/showAccountByPage?currentPage='+currentPage).then(function (resp) {
                    console.log(resp.data);
                    if(resp.data.status==200){
                        that.totalPage=resp.data.totalCount;
                        that.tableData=resp.data.accountList;
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
